<template>
  <div class="app-container">
    <div class="app-container__section shrink-0">
      <plus-search
          v-bind="searchBinds"
          :columns="columns"
          @reset="onMyReset"
      ></plus-search>
    </div>

    <div class="app-container__section">
      <plus-table
          v-bind="tableBinds"
          :columns="columns"
      >
        <template #title>
          <table-title   />
        </template>
        <template #toolbar>
          <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['system:dict:add']"
          >新增
          </el-button>
          <el-button
              type="danger"
              icon="Delete"
              :disabled="gSelection.length > 0"
              @click="handleDelete"
              v-hasPermi="['system:dict:remove']"
          >删除
          </el-button>
          <el-button
              type="warning"
              icon="Close"
              @click="handleClose"
          >关闭
          </el-button>
        </template>
        <template #plus-cell-dictLabel="scope">
          <span
              v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)">{{
              scope.row.dictLabel
            }}</span>
          <el-tag v-else :type="scope.row.listClass === 'primary' ? 'primary' : scope.row.listClass"
                  :class="scope.row.cssClass">{{ scope.row.dictLabel }}
          </el-tag>
        </template>
        <template #plus-cell-action="scope">
          <el-tooltip effect="dark" content="修改" placement="top">
            <el-button
                type="primary"
                link
                icon="EditPen"
                @click="handleUpdate(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top">
            <el-button
                type="danger"
                link
                icon="Delete"
                @click="handleDelete(scope.row)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </plus-table>
    </div>

    <!-- 添加或修改参数配置对话框 -->
    <addForm ref="addFormRef" @refreshList="gGetList" :dictType="defaultDictType" />

  </div>
</template>

<script setup>
import { useColumnsDict, useCommonConfig } from './hookData.js'
import { useDelHook, useListHook } from '@/hooks/crud/index.js'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import { getType } from '@/api/system/dict/type.js'
import useDictStore from '@/store/modules/dict.js'
import addForm from "./addDictData.vue"
defineOptions({
  name: 'Data'
})
const { proxy,apiFn,primaryKey,moduleName,beforeDelFn } = useCommonConfig()
const { dictData, columns, } = useColumnsDict()
const defaultDictType = ref("");
const defaultDictData = ref({})
const route = useRoute();

// ====================列表逻辑=========================
const gSearchForm = ref({ })
const { gGetList, gAllExposeOption } = useListHook({
  init:false,
  listApiFn: apiFn.listApiFn,
  gSearchForm,
  beforeRequest: (reqData) => {
    return reqData
  },
  afterRequest: (resData) => {
    return resData
  }
})
// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption,primaryKey }))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption },['reset'] ))
// ==================删除逻辑===========================
const { gDelete } = useDelHook({
  delApiFn: apiFn.delApiFn,
  moduleName,
  beforeDelFn: (reqData) => beforeDelFn(reqData),
  afterDelFn: (resData) =>{
    gGetList()
    useDictStore().removeDict(gSearchForm.value.dictType);
  },
})
const handleDelete = (data)=>{
  gDelete(data)
}
// ===================新增、修改======================
const addFormRef = ref(null)
// 新增操作
function handleAdd() {
  addFormRef.value.gOpen()
}
// 修改操作
function handleUpdate(row) {
  addFormRef.value.gOpen(row)
}

const onMyReset = ()=>{
  gAllExposeOption.gResetSearchForm()
  gAllExposeOption.gResetPage()
  gSearchForm.value.dictType = defaultDictType.value;
  gGetList()
}


/** 查询字典类型详细 */
function getTypes(dictId) {
  getType(dictId).then(({data}) => {
    gSearchForm.value.dictType = data.dictType;
    defaultDictType.value = data.dictType;
    defaultDictData.value = data
    gGetList();
  });
}

getTypes(route.params && route.params.dictId);

/** 返回按钮操作 */
function handleClose() {
  const obj = {path: "/system/dict"};
  proxy.$tab.closeOpenPage(obj);
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/dict/data/export", {
    ...searchForm.value
  }, `dict_data_${new Date().getTime()}.xlsx`);
}

</script>
